<template>
	<view>



<!-- 		<dk-tanchuang v-model="giftianchu" width="80%" height="40%" mode="center" :borderRadius="30"
			:giftitle="giftitle" :gifcontent="gifcontent" :giftimg="giftimg" :maskCloseable="false">
		</dk-tanchuang>
		 -->
<tn-popup v-model="giftianchu" width="100%" height="500rpx" mode="center"
			backgroundColor="rgba(0, 0, 0, 0.0)" :borderRadius="30" :closeBtn="false" :maskCloseable="false">
		<view class="tn-text-center" style="padding:0 50px;" >
		<image  :animation="baoxiangmone" mode="heightFix" style="height:150px;" :src="giftimg">
		</image>
		</view>
		</tn-popup>


		<tn-popup v-model="liwusvgashow" width="100%" height="100%" mode="center"
			backgroundColor="rgba(255, 255, 255, 0.1)" :borderRadius="30" :closeBtn="false" :maskCloseable="false">
			<l-svga ref="svga"></l-svga>
		</tn-popup>


	</view>
</template>

<script>
	import {
		host
	} from '@/siteinfo.js'

	const audioContext = uni.createInnerAudioContext()
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'TemplateDetails',
		mixins: [template_page_mixin, MescrollMixin],
		components: {
			MescrollBody
		},

		data() {
			return {
				baoxiangmone:{},
				//、
				songchu: false,
				cardCur: 0,
				liwusvgashow: false,
				giftimg: '',
				giftianchu: false,
				giftitle: '',
				gifcontent: '',
				popshow: true,
				//
				action: host + '/chat/user/up_mp3',
				isRecord: false,
				voc: false,
				vocurl: "",
				vocscend: 0,
				isplay: false,
				op: '',
				truehead: '',
				isRound: true,
				//
				shang_price: 5,
				dashangshow: false,

				catsonindex: 0,
				tuijian: [],
				latestUserAvatar: [],
				redbatlist: [],

				jubao_body: '',
				jubaoshow: false,
				chongzhiis: false,
				zidongbofang: false,
				videoPlay: false,
				isplay: false,
				type: '',
				index: 0,
				is_focus: false,
				commentCount: 0,
				huifuindex: 0,
				pid: 0,
				loginBoxFlag: false, // 登录框显示隐藏状态
				sendmsgBoy: '',
				sendmsgBoy_huifuname: '',
				content: [],
				loginBoxFlag: false, // 登录框显示隐藏状态
				id: 290,
				user_id: 0,
				body: [],

				show_poster: false, //显示海报
				path: '', //生成的图片地址			
				posterObj: {
					width: '580rpx',
					height: '928rpx',
					background: '#fff',
					borderRadius: '16rpx',
					views: []
				}, //画板数据
				isUp: false
			}
		},


		onLoad(option) {
			console.log(option)
		
			
						if (option.sec == 1) {
							this.giftimg = option.image
							this.giftitle = "收到礼物"
							this.giftianchu = true
							this.gifcontent = ''
							this.popshow = false
							setTimeout(() => {
								this.giftianchu = false
								uni.navigateBack()
							}, 2000);
						}
						if (option.sec == 2) {
							this.gifcontent = ''
							this.popshow = false
							this.liwu(option.svga)
						}
				var baoxiangmone = uni.createAnimation({
				     duration: 1000,
				     timingFunction: 'ease',
				   })
				this.baoxiangmone = baoxiangmone
					
				baoxiangmone.scale(3, 3).step()
				baoxiangmone.scale(1, 1).step()
					 
				this.baoxiangmone = baoxiangmone.export()		
						

		},
		computed: {
			...mapState({
				userInfoAvatar: store => store.userInfo.userInfoAvatar // 头像地址		
			})
		},

		methods: {

			liwu(url) {
				this.liwusvgashow = true
				setTimeout(() => {
					this.bofangsvga(url)
				}, 500);
			},

			bofangsvga(url) {

				this.$refs.svga.render(async (parser, player) => {
					const videoItem = await parser.load(url);
					await player.setVideoItem(videoItem);
					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player.loops = 1
					player.clearsAfterStop = true
					// 开始播放动画，reverse = true 时则反向播放。
					player.startAnimation()

					player.onPercentage((percentage) => {
						// 由于有动画未完成时需要显示其他效果的需求，所以监听动画播放进度
						// svga动画播放进度大于 70% 时，显示卡牌
						if (percentage * 100 > 70) {
							//this.svgaShow = false
						}
					})
					// 监听动画完成
					player.onFinished(() => {
						console.log('播放完毕')
						player.clear()
						this.liwusvgashow = false
						uni.navigateBack()
					})
				})
			},



			closedPopup() {
				this.popshow = false
				if (!this.songchu) {
					uni.navigateBack()
				}
			},







		}
	}
</script>
<style>
	page {
		/* 必须的样式，这是页面背景色为透明色 */
		background: transparent;
	}
</style>
<style lang="scss" scoped>

</style>